<template>
	<view>
		<view class="avatar-container">
			<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
				<image class="avatar" :src="avatar"></image>
			</button>
		</view>
		<view style="padding: 80rpx;">
			<u-form :model="loginModel" ref="form1">
				<u-form-item prop="phone" left-icon="phone-fill" :left-icon-style="leftIconStyle">
					<u-input placeholder="请输入电话" v-model="loginModel.phone"></u-input>
				</u-form-item>
				<u-form-item prop="username" left-icon="account-fill" :left-icon-style="leftIconStyle">
					<u-input placeholder="请输入账户" v-model="loginModel.username"></u-input>
				</u-form-item>
				<u-form-item prop="password" left-icon="lock" :left-icon-style="leftIconStyle">
					<u-input placeholder="请输入密码" type="password" v-model="loginModel.password"></u-input>
				</u-form-item>
				<u-form-item prop="passwordConfirm" left-icon="lock" :left-icon-style="leftIconStyle">
					<u-input placeholder="请输入确定密码" type="password" v-model="loginModel.passwordConfirm"></u-input>
				</u-form-item>
				<view style="display: flex; justify-content: flex-end;color:#ff7670;margin-top: 30rpx;"
					@click="toLogin">
					已有账号，去登录
				</view>
				<u-button :custom-style="buttonRegistrationStyle" @click="commit">注册</u-button>
			</u-form>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue';

	import {
		onReady
	} from '@dcloudio/uni-app';
import { registerApi } from '../../api/user';

	const form1 = ref()

	const avatar = ref('/static/user.jpg');
	const onChooseAvatar = (e) => {
		const {
			avatarUrl
		} = e.detail
		console.log("avatarUrl", avatarUrl)
		avatar.value = avatarUrl
	}

	const leftIconStyle = {
		fontSize: '68rpx',
		color: '#ff7670'
	}

	const buttonRegistrationStyle = {
		marginTop: '30rpx',
		color: '#fff',
		backgroundColor: '#00cc33'
	}

	const loginModel = reactive({
		phone: '',
		username: '',
		password: '',
		passwordConfirm: ""
	})

	const toLogin = () => {
		uni.navigateTo({
			url: "../login/login"
		})
	}

	//表单验证规则
	const rules = reactive({
		phone: [{
			required: true,
			message: '请输入电话',
			trigger: ['change', 'blur'],
		}],
		username: [{
			required: true,
			message: '请输入账号',
			// 可以单个或者同时写两个触发验证方式 
			trigger: ['change', 'blur'],
		}],
		password: [{
			required: true,
			message: '请输入密码',
			// 可以单个或者同时写两个触发验证方式 
			trigger: ['change', 'blur'],
		}],
		passwordConfirm: [{
			required: true,
			message: '请输入确定密码',
			// 可以单个或者同时写两个触发验证方式 
			trigger: ['change', 'blur'],
		}],
	})

	const commit = () => {
		form1.value.validate(async (valid) => {
			if (valid) {
				if(loginModel.passwordConfirm!=loginModel.password){
					uni.showToast({
						title: '密码不一致',
						icon: 'none',
						duration: 2000
					})
					return;
				}
				let res = await registerApi(loginModel)
				if (res && res.code == 200){
					uni.showToast({
						title: '注册成功',
						icon: 'none',
						duration: 1000
					})
					setTimeout(()=>{
						uni.navigateTo({
							url: '../login/login'
						})
					},1000)
				}
			}
		})
	}

	onReady(() => {
		form1.value.setRules(rules)
	})
</script>

<style lang="scss">
	.avatar-container {
		padding-top: 80rpx;

		.avatar-wrapper {
			background-color: #fff;
			border-radius: 100%;
			width: 70px;
			height: 70px;
			padding: 0;
		}

		.avatar {
			border-radius: 100%;
			width: 70px;
			height: 70px;
		}
	}
</style>